import React, { forwardRef } from 'react';
import cls from 'classnames';
import { MutableFormItem, ITEM_MODE } from '@/molecules';
import styles from './index.less';

const QuestionFormItem = ({ questionNumber, initMode, suffix, className, onModeChange, ...rest }, ref) => {
    const [currMode, setMode] = React.useState(initMode);
    const handleModeChange = React.useCallback(
        mode => {
            setMode(mode);
            onModeChange(mode);
        },
        [onModeChange, setMode]
    );

    return (
        <MutableFormItem
            ref={ref}
            initMode={initMode}
            className={cls(styles.root, { [styles.grayBg]: currMode === ITEM_MODE.EDITING }, className)}
            prefix={<span className={styles.prefix}>{questionNumber}</span>}
            suffix={suffix}
            onModeChange={handleModeChange}
            {...rest}
        />
    );
};

export default forwardRef(QuestionFormItem);
export { ITEM_MODE };
